<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>浮动布局</title>
        <style>
            .fu{
                background-color: navajowhite;
                /*父元素失高/高度坍塌
                当父元素中所有子元素都浮动走，父元素会失去高度
                可以使用BFC结界保护，根据子元素浮动后的实际高度自动填充高度*/
                overflow: hidden;
                width: 600px;
            }
            .fu>div{
                width: 100px;
                height: 100px;
                border: 5px solid lemonchiffon;
            }
            .z1{
                background-color: violet;
                float: left;/*浮动后的元素会脱离文档流，释放布局空间，横置*/
            }
            .z2{
                background-color: cyan;
                float: left;
            }
            .z3{
                background-color: mediumspringgreen;
                float: right;
            }

        </style>
    </head>
    <body>
        <div class="fu">
            <div class="z1"></div>
            <div class="z2"></div>
            <div class="z3"></div>
        </div>
    </body>
</html>